<template>
    <div class="auditlist">
        <div class="auditlist-header">
            <div class="auditlist-header-left">
                <el-input placeholder="请输入关键字" v-model="selectNewsname" />
                <el-button type="primary" @click="selectNews"><el-icon>
                        <Search />
                    </el-icon>查询</el-button>
            </div>
            <div class="auditlist-header-right">
                <el-input placeholder="在本页检索" v-model="search" />
            </div>
        </div>
        <div>
            <div class="auditlist-table">
                <el-table :data="filterTableData" :border="true" :height="tableHeight" style="width: 100%" tooltip-effect>
                    <el-table-column property="newsDate" label="发布时间" align="center" />
                    <el-table-column property="newsTitle" label="新闻标题" align="center" show-overflow-tooltip />
                    <el-table-column property="categoryName" label="新闻栏目" align="center" />
                    <el-table-column label="新闻状态" align="center" property="newsIsCheck">
                        <template #default="scope">
                            <i :class="getnewstaus(scope.row.newsIsCheck)"></i>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="auditlist-footer">
                <el-pagination small background layout="total, prev, pager, next" :page-size="10" :total="totals"
                    @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import { type } from 'os';
import api from '../../api/api'

const selectNewsname = ref('')
const search = ref('')
const tableData = ref<any[]>([])
const totals = ref(0)
const currentpage = ref(0)

let tableHeight = ref(window.innerHeight - 246)

const getnewstaus = (staus: any) => {
    if (staus) {
        return "iconfont icon-yishenhe"
    } else {
        return "iconfont icon-daishenhe"
    }
}

const filterTableData = computed(() =>
    tableData.value.filter(
        (data) =>
            !search.value ||
            data.newsTitle.toLowerCase().includes(search.value.toLowerCase())
    )
)

const selectNews = () => {
    api.approvedAll({ page: 1, pageSize: 10, name: selectNewsname.value })
        .then(res => {
            if (res.data.code == 200) {
                ElMessage({
                    message: '查询成功',
                    type: 'success'
                })
                tableData.value = res.data.data.records
            }
        }).catch(err => console.log(err))
}


const initNews = (current: number) => {
    api.approvedAll({ page: current, pageSize: 10 })
        .then(res => {
            if (res.data.code == 200) {
                tableData.value = res.data.data.records
                totals.value = res.data.data.total
            }
        })
        .catch(err => console.log(err))
    api.unapproved({ page: current })
}


const handleCurrentChange = (val: number) => {
    currentpage.value = val
    initNews(val)
}

onMounted(() => {
    handleCurrentChange(1)

    window.onresize = () => {
        tableHeight.value = window.innerHeight - 246
    }
})

</script>

<style scoped>
.auditlist {
    background-color: #fcfffc;
    border-radius: 10px;
}

.auditlist-header {
    display: flex;
    padding: 10px;
    justify-content: space-between;
    align-items: center;
}

.auditlist-header-left {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    align-items: center;
}

.auditlist-header-left button {
    margin-left: 15px;
}

.auditlist-footer {
    display: flex;
    justify-content: center;
    padding: 0 0 10px;

}

.auditlist-table {
    padding: 10px;
    box-sizing: border-box;
    height: calc(100% - 3rem);
}
</style>